<template>
  <div>
    <div ref="viewer"></div>
    <div
      style="
        width: 100px;
        height: 100px;
        background-color: red;
        z-index: 1000;
        position: fixed;
      "
    ></div>
  </div>
</template>

<script>
/* eslint-disable */
import WebViewer from "@pdftron/pdfjs-express-viewer";

export default {
  name: "WebViewer",
  props: {
    path: String,
  },
  mounted: function () {
    let that = this;
    WebViewer(
      {
        path: this.path,
        initialDoc: `${process.env.BASE_URL}files/demo.pdf`,
        licenseKey: "yYAQ34IKypUnznBPbRGP",
      },
      this.$refs.viewer
    ).then((instance) => {
      // now you can access APIs through the WebViewer instance
      const { Core, UI } = instance;

      var customModal = {
        show: function (options) {
          const modal = {
            dataElement: "meanwhileInFinlandModal",
            header: {
              title: options.title || "提示",
            },
            body: {
              children: [
                {
                  title: options.message,
                },
              ], // HTML dom elements
            },
            footer: {
              className: "footer",
              children: [
                {
                  title: "取消",
                  button: true,
                  style: {},
                  className: "modal-button cancel-form-field-button",
                  onClick: (e) => {
                    instance.UI.disableElements([modal.dataElement]);
                  },
                },
                {
                  title: "确定",
                  button: true,
                  style: {},
                  className: "modal-button confirm ok-btn",
                  onClick: (e) => {
                    options.ok();
                  },
                },
              ],
            },
          };
          instance.UI.addCustomModal(modal);
          instance.UI.openElements([modal.dataElement]);
        },
        hide: function () {
          instance.UI.disableElements(["meanwhileInFinlandModal"]);
        },
      };

      // debugger
      const UIEvents = instance.UI.Events;
      //设置语言
      instance.UI.setLanguage("zh_cn");

      //设置水印
      // Core.documentViewer.setWatermark({
      //   diagonal: {
      //     fontSize: 72, // or even smaller size
      //     fontFamily: 'sans-serif',
      //     color: 'gray',
      //     opacity: 30, // from 0 to 100
      //     text: '文库系统'
      //   },
      //   header: {
      //     fontSize: 36,
      //     fontFamily: 'sans-serif',
      //     color: 'gray',
      //     opacity: 30,
      //     left: '文库系统',
      //     center: '文库系统',
      //     right: '文库系统'
      //   },
      //   footer: {
      //     fontSize: 72,
      //     fontFamily: 'sans-serif',
      //     color: 'gray',
      //     opacity: 30,
      //     left: '文库系统',
      //     center: '文库系统',
      //     right: '文库系统'
      //   }
      // });

      //设置选中文字后弹出按钮
      instance.UI.textPopup.add({
        type: "actionButton",
        img: '<svg t="1704368972768" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4443" width="18" height="18"><path d="M810.666667 704v256a21.333333 21.333333 0 0 1-32.146667 18.386667L426.666667 771.42l-351.853334 206.966667A21.333333 21.333333 0 0 1 42.666667 960V96a53.393333 53.393333 0 0 1 53.333333-53.333333h661.333333a53.393333 53.393333 0 0 1 53.333334 53.333333v53.333333a21.333333 21.333333 0 0 1-42.666667 0v-53.333333a10.666667 10.666667 0 0 0-10.666667-10.666667H96a10.666667 10.666667 0 0 0-10.666667 10.666667v826.7l330.52-194.42a21.333333 21.333333 0 0 1 21.626667 0L768 922.7V704a21.333333 21.333333 0 0 1 42.666667 0z m149.333333-320h-149.333333V234.666667a21.333333 21.333333 0 0 0-42.666667 0v149.333333H618.666667a21.333333 21.333333 0 0 0 0 42.666667h149.333333v149.333333a21.333333 21.333333 0 0 0 42.666667 0V426.666667h149.333333a21.333333 21.333333 0 0 0 0-42.666667z" fill="#485056" p-id="4444"></path></svg>',
        title: "创建书签",
        onClick: () => {
          //https://pdfjs.express/documentation/ui-customization/customizing-header.8#statefulbutton
          const currentPage = instance.getCurrentPageNumber();
          console.log(`当前页：${currentPage}`);

          //获取选中文字的框位置信息
          const quads = Core.documentViewer.getSelectedTextQuads(currentPage);
          const selectedText = Core.documentViewer.getSelectedText(currentPage);
          console.log(`选择文字：${selectedText}`);
          debugger;
        },
      });

      //textSelected
      //setCurrentPage
      //displayBookmark
      // instance.UI.hideOutlineControl();
      // adding an event listener for when a document is loaded
      Core.documentViewer.addEventListener("documentLoaded", () => {
        console.log("document loaded");
        //搜索关键字
        const searchValue = "you";
        instance.UI.searchText(searchValue, {
          caseSensitive: true,
          wholeWord: true,
        });

        instance.UI.enableElements([
          "leftPanel",
          "leftPanelButton",
          "bookmarksPanelButton",
          "bookmarksPanel",
        ]);

        //隐藏按钮
        instance.UI.disableElements([
          "newBookmarkButton",
          "stickyToolButton",
          "highlightToolButton",
          "freeHandToolButton",
          "freeHandHighlightToolButton",
          "freeTextToolButton",
          "languageButton",
          "themeChangeButton",
        ]);

        // instance.UI.openElements(['menuOverlay', 'leftPanel', 'bookmarksPanelButton', 'bookmarksPanel']);
        instance.UI.openElements(["leftPanel"]);
        instance.UI.setActiveLeftPanel("bookmarksPanel");
        const iframeDoc = instance.UI.iframeWindow.document;
        setTimeout(() => {
          let buttonList = iframeDoc.querySelectorAll(
            ".header-edit-button,.bookmark-outline-more-button,.bookmark-outline-more-button"
          );
          buttonList.forEach((item) => {
            item.style.display = "none";
          });
        }, 1000);
      });

      // 为页码更改时添加事件侦听器
      Core.documentViewer.addEventListener(
        "pageNumberUpdated",
        (pageNumber) => {
          console.log(`Page number is: ${pageNumber}`);
        }
      );

      Core.documentViewer.addEventListener("outlineBookmarksChanged", (e) => {
        debugger;
      });

      Core.documentViewer.addEventListener("userBookmarksChanged", (e) => {
        debugger;
      });

      // 在页眉中添加一个按钮，单击该按钮可将页面设置为下一页
      // UI.setHeaderItems((header) => {
      //   header.push({
      //     type: "actionButton",
      //     img: "https://icons.getbootstrap.com/assets/icons/caret-right-fill.svg",
      //     onClick: () => {
      //       const currentPage = Core.documentViewer.getCurrentPage();
      //       const totalPages = Core.documentViewer.getPageCount();
      //       const atLastPage = currentPage === totalPages;

      //       if (atLastPage) {
      //         Core.documentViewer.setCurrentPage(1);
      //       } else {
      //         Core.documentViewer.setCurrentPage(currentPage + 1);
      //       }
      //     },
      //   });
      // });

      UI.setHeaderItems((header) => {
        header.push({
          type: "actionButton",
          img: '<svg t="1704380001428" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2401" id="mx_n_1704380001429" width="22" height="22"><path d="M853.333333 533.333333a32 32 0 0 1 64 0v266.666667c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V256c0-64.8 52.533333-117.333333 117.333333-117.333333h277.333333a32 32 0 0 1 0 64H224a53.333333 53.333333 0 0 0-53.333333 53.333333v544a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V533.333333z m-42.058666-277.333333l-89.792-95.402667a32 32 0 0 1 46.613333-43.861333l140.544 149.333333C927.861333 286.485333 913.376 320 885.333333 320H724.704C643.029333 320 576 391.210667 576 480v192a32 32 0 1 1-64 0V480c0-123.296 94.784-224 212.704-224h86.570667z" fill="#485056" p-id="2402"></path></svg>',
          title: "分享",
          onClick: () => {
            alert("分享成功");
          },
        });
      });

      //导入书签
      fetch(
        "http://222.185.127.232:18081/api/manage/kanban/shirong/getMapStatData?dataType=1&parentId=17",
        {
          headers: {
            Origin: "http://localhost:8080/",
            "Content-Type": "application/json",
            // "abc": "abc",
          },
          method: "GET",
        }
      ).then(function (response) {
        if (response.status === 200) {
          response.json().then((result) => {
            const importBookmarks = { 0: "文库系统1", 2: "安全事故重要指南" };
            instance.UI.importBookmarks(importBookmarks);
            // {"0":"Bookmark 1","2":"Bookmark 2"}
            // const bookmarks = JSON.parse(bookmarksString);
            // instance.UI.importBookmarks(bookmarks);
          });
        }
      });

      //导出书签
      // const exportBookmarks = instance.UI.exportBookmarks();

      // const utils = new ExpressUtils({
      //   serverKey: '49EzA6YczS1pfUG7ZYZy',
      //   clientKey: '0U7UA9kWPkFSfX3iQNB5'
      // })

      // instance.UI.setTheme({ primary: 'blue', secondary: 'white' });

      // const iframeDoc = instance.UI.iframeWindow.document;
      // const zoomOverlay = iframeDoc.querySelector('[data-element="zoomOverlay"]');

      //自定义UI:https://github.com/PDFTron/webviewer-ui

      customModal.show({
        message: "创建书签成功!",
        ok: () => {
          customModal.hide();
          window.parent.showMyMessage();
        },
      });
    });
  },
  method: {

  },
};

window.showMyMessage = function () {
  alert("abc");
};
</script>

<style scoped>
div {
  width: 100%;
  height: 100vh;
}
</style>
